<template>
  <div class="search">
    <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-number-keyboard
      :show="show"
      @blur="show = false"
      @input="onInput"
      @delete="onDelete"
      v-model="value"
    />
    <van-search
      @touchstart.stop="show = true"
      v-model="value"
      :show="show"
      :maxlength="6"
      @blur="show = false"
      placeholder="半夜肚子饿是什么引起的"
      input-align="center"
    >
      <img src="src\assets\图层 1.png" alt="" />
    </van-search>
  </div>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <p>国内医院排名</p>
    <p>食疗有什么好处</p>
    <p>注意身体发出的这些信号</p>
    <p>如何缓解排尿困难</p>
    <p>食疗有什么好处</p>
  </van-list>
  <h3 style="padding-left: 10px">热门推荐</h3>
  <van-row class="row">
    <van-col span="12" class="listz">什么是拔罐</van-col>
    <van-col span="12" class="listz">肛门总是痒怎么回事</van-col>
    <van-col span="12" class="listz">如何缓解排尿困难</van-col>
    <van-col span="12" class="listz">床单多久洗一次好</van-col>
    <van-col span="12" class="listz">茯苓的功效级禁忌</van-col>
    <van-col span="12" class="listz">凉水好还是热水好</van-col>
  </van-row>
  <h3 style="padding-left: 10px">热门专题</h3>
  <div class="Outpatient">
    <van-grid :border="false" :column-num="2">
      <van-grid-item>
        <van-image src="src\assets\图层 1.png" style="width: 100%" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="src\assets\图层 2.png" style="width: 100%" />
      </van-grid-item>
    </van-grid>
    <van-grid :border="false" :column-num="2">
      <van-grid-item>
        <van-image src="src\assets\图层 3.png" style="width: 100%" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="src\assets\图层 4.png" style="width: 100%" />
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script lang="ts"  >
import { ref } from "vue";
import { useRouter } from "vue-router";
import { showToast, ToastOptions } from "vant";

export default {
  setup() {
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const router = useRouter();
    const show = ref(true);
    const value = ref("");

    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 2; i++) {
          list.value.push(list.value.length + 1);
        }

        // 加载状态结束
        loading.value = false;

        // 数据全部加载完成
        if (list.value.length >= 2) {
          finished.value = true;
        }
      }, 1000);
    };
    const onClickLeft = () => {
      router.back();
    };

    const onInput = (value: string | ToastOptions | undefined) =>
      showToast(value);
    const onDelete = () => showToast("删除");
    return {
      list,
      onLoad,
      loading,
      finished,
      router,
      show,
      value,
      onInput,
      onDelete,

      onClickLeft,
    };
  },
};
</script>

<style scoped>
.van-search__content {
  border: 2px solid rgb(0, 241, 52);
}
p {
  padding-left: 10px;
  color: rgb(54, 54, 54);
  display: block;
}
.row {
  margin-top: 20px;
}
.listz {
  padding: 10px;
  color: rgb(54, 54, 54);
}
</style>
